import React, { Component } from 'react';
import { NavLink, Route } from 'react-router-dom';
import { Row, Col, Card, Icon } from 'antd';
import data from '../data/index.json';
export default class Backend extends Component {
  componentDidMount() {
    const { history } = this.props;
    if (!window.sessionStorage.getItem('user')) {
      alert('您并没有注册记录，请返回注册,(2秒后自动返回)');
      setTimeout(() => {
        history.replace('/register');
      }, 2000);
    }
  }
  render() {
    const { match } = this.props;
    let { path } = match;
    return (
      <div>
        <nav className="zrb-backend-nav-1">
          <Row>
            {data.navs2.map((item, index) => {
              return (
                <Col
                  key={index}
                  xs={{ span: 5, offset: 1 }}
                  lg={{ span: 6, offset: 2 }}
                >
                  <NavLink
                    to={`${path}/${item}`}
                    activeClassName="link-active"
                    className="zrb-backend-nav-2"
                  >
                    {item}
                  </NavLink>
                </Col>
              );
            })}
          </Row>
        </nav>
        <main>
          <Route path={`${path}/`} exact component={Java} />
          <Route path={`${path}/java`} exact component={Java} />
          <Route path={`${path}/spring`} component={Spring} />
          <Route path={`${path}/python`} component={Python} />
          <Route path={`${path}/MySQL`} component={MySQL} />
          <Route path={`${path}/Docker`} component={Docker} />
          <Route path={`${path}/Lin`} component={Lin} />
        </main>
      </div>
    );
  }
}

const Java = () => {
  return (
    <div className="zrb-tuijian">
      <Card bordered="true">
        {data.Java.map((item, index) => {
          return (
            <Row key={item.id || index}>
              <Col span={24}>
                <p>
                  <span className="zrb-span-1">{item.column}</span>
                  <span>{item.nickname}</span>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-1">
                  <a href="#">{item.confession}</a>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-2">
                  <span>
                    <a href="#">
                      <Icon type={item.icon1} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                  <span>
                    <a href="#">
                      <Icon type={item.icon2} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                </p>
              </Col>
            </Row>
          );
        })}
      </Card>
    </div>
  );
};
const Spring = () => {
  return (
    <div className="zrb-tuijian">
      <Card bordered="true">
        {data.Spring.map((item, index) => {
          return (
            <Row key={item.id || index}>
              <Col span={24}>
                <p>
                  <span className="zrb-span-1">{item.column}</span>
                  <span>{item.nickname}</span>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-1">
                  <a href="#">{item.confession}</a>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-2">
                  <span>
                    <a href="#">
                      <Icon type={item.icon1} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                  <span>
                    <a href="#">
                      <Icon type={item.icon2} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                </p>
              </Col>
            </Row>
          );
        })}
      </Card>
    </div>
  );
};
const Python = () => {
  return (
    <div className="zrb-tuijian">
      <Card bordered="true">
        {data.Python.map((item, index) => {
          return (
            <Row key={item.id || index}>
              <Col span={24}>
                <p>
                  <span className="zrb-span-1">{item.column}</span>
                  <span>{item.nickname}</span>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-1">
                  <a href="#">{item.confession}</a>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-2">
                  <span>
                    <a href="#">
                      <Icon type={item.icon1} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                  <span>
                    <a href="#">
                      <Icon type={item.icon2} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                </p>
              </Col>
            </Row>
          );
        })}
      </Card>
    </div>
  );
};
const MySQL = () => {
  return (
    <div className="zrb-tuijian">
      <Card bordered="true">
        {data.MySQL.map((item, index) => {
          return (
            <Row key={item.id || index}>
              <Col span={24}>
                <p>
                  <span className="zrb-span-1">{item.column}</span>
                  <span>{item.nickname}</span>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-1">
                  <a href="#">{item.confession}</a>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-2">
                  <span>
                    <a href="#">
                      <Icon type={item.icon1} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                  <span>
                    <a href="#">
                      <Icon type={item.icon2} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                </p>
              </Col>
            </Row>
          );
        })}
      </Card>
    </div>
  );
};
const Docker = () => {
  return (
    <div className="zrb-tuijian">
      <Card bordered="true">
        {data.Docker.map((item, index) => {
          return (
            <Row key={item.id || index}>
              <Col span={24}>
                <p>
                  <span className="zrb-span-1">{item.column}</span>
                  <span>{item.nickname}</span>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-1">
                  <a href="#">{item.confession}</a>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-2">
                  <span>
                    <a href="#">
                      <Icon type={item.icon1} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                  <span>
                    <a href="#">
                      <Icon type={item.icon2} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                </p>
              </Col>
            </Row>
          );
        })}
      </Card>
    </div>
  );
};

const Lin = () => {
  return (
    <div className="zrb-tuijian">
      <Card bordered="true">
        {data.Lin.map((item, index) => {
          return (
            <Row key={item.id || index}>
              <Col span={24}>
                <p>
                  <span className="zrb-span-1">{item.column}</span>
                  <span>{item.nickname}</span>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-1">
                  <a href="#">{item.confession}</a>
                </p>
              </Col>
              <Col span={24}>
                <p className="zrb-p-2">
                  <span>
                    <a href="#">
                      <Icon type={item.icon1} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                  <span>
                    <a href="#">
                      <Icon type={item.icon2} theme="filled" />
                    </a>
                  </span>
                  <span>0</span>
                </p>
              </Col>
            </Row>
          );
        })}
      </Card>
    </div>
  );
};
